<script setup lang='ts'>
withDefaults(defineProps<{
    changeSize: (newValue: string) => void,
    color: string,
    size?: string,
    btnType?: 'success' | 'danger' | 'warning'
}>(), {
    size: 'mini',
    btnType: 'danger'
})

const emit = defineEmits<{
    (e: 'changeColor', color: string): void
    (e: 'changeSize', size: string): void
}>()
const btnColor = () => {
    emit('changeColor', '五彩斑斓的黑')
}

</script>

<template>
    <div style="width: 300px; height: 300px;border: 5px solid red;">
        子组件--{{ color }}--{{ size }}--{{ btnType }}
        <button @click="btnColor">修改颜色</button>
        <button @click="emit('changeSize', 'bigger')">改变大小</button>
        <button @click="changeSize('middle')">改变大小(2)</button>
    </div>
</template>

<style scoped></style>